<template>
  <WmcDialog
    :title="title"
    :dialogVisible="dialogVisible"
    :width="width"
    @close="closeDialog"
    @handleConfirm="handleConfirm"
  >
    <template #form>
      <WmcForm v-bind="modelConfig" v-model="formData" :formRef="formRef">
        <template #append-item>
          <slot></slot>
        </template>
      </WmcForm>
    </template>
  </WmcDialog>
</template>

<script lang="ts">
import { defineComponent, ref, watch } from 'vue'
import WmcForm from '@/render/base-ui/form'
import WmcDialog from '@/render/base-ui/dialog'

export default defineComponent({
  components: {
    WmcForm,
    WmcDialog
  },
  props: {
    title: {
      type: String,
      default: ''
    },
    width: {
      type: String,
      default: '420px'
    },
    dialogVisible: {
      type: Boolean,
      default: false
    },
    modelConfig: {
      type: Object,
      default: () => ({})
    },
    modelValue: {
      type: Object,
      default: () => ({})
    }
  },
  emits: ['update:modelValue', 'close', 'handleConfirm'],
  setup(props, { emit }) {
    const formRef = ref()

    const closeDialog = () => {
      emit('close')
    }

    const formData = ref({ ...props.modelValue })

    const handleConfirm = async () => {
      // const valid = await formRef.value.validate()
      // if (valid) {
      //   emit('handleConfirm')
      // }
      emit('handleConfirm')
    }

    watch(
      formData,
      (newValue) => {
        emit('update:modelValue', newValue)
      },
      {
        deep: true
      }
    )

    return { formData, formRef, closeDialog, handleConfirm }
  }
})
</script>

<style scoped></style>
